﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shgoo Ad</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-1.8.0.min.js"></script>
<link href="style/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="style/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<script src="script/bootstrap-paginator-master/src/bootstrap-paginator.js"></script>
<script type="text/javascript" src="script/playingui.js"></script>
<script type="text/javascript">
        	var jsonpagesize=0;
        	var device={};
            $(document).ready(function() {
            	//定义自动变量,以后获取dom均以$+dom的id名即可. 如<div id='tbody'></div>  直接使用$tbody即可.
                playingui.autovariable('loadingimg,tbody,tbodyList,norecord,tbodyPage,tree');
                bindEvent();
                bindGrid(1);
            });
       
            function bindButton()
            {
            	 $(".opButton").live("click", function() {
            	     alert('按钮点击事件');
            	 });
            }
            
            function bindPage()
            {
            	var options = {
		            currentPage: 1,
		            totalPages: jsonpagesize,
		            onPageChanged: function(e,oldPage,newPage){
		            	bindGrid(newPage,false);
		            }
		        };
		        $tbodyPage.bootstrapPaginator(options);
            }
            
            function showLoadingImg(isshow)
            {
            	if(isshow)
            	{
            		$loadingimg.css("display","block");
            		$loadingimg.show();
            	}
            	else
            	{
            		$loadingimg.hide();
            	}
            }
            
            function bindGrid(newPag)
            {
            	 showNoRecord(false);
            	 $.ajax({
                      type: "get",
                      url: 'datajson.js',
                      dataType:"json",
                      beforeSend: function () { showLoadingImg(true); },
                      complete: function () { showLoadingImg(false); },
                      success: function (data) {
                      		if(data.dataMap==null)
                      		{
                      			showNoRecord(true);
                      		}
                      		else
                      		{
	                            var json = data.dataMap.msg;
	                            jsonpagesize=data.dataMap.totalpage;
	                              	var grid={};
	                              	grid.json=json;
	                              	grid.data=[
		                                {name:'deviceid',type:'string'},
		                                {name:'devicename',type:'string'},
		                                {name:'deviceip',type:'string'},
		                                {name:'deviceversion',type:'string'},
		                                {name:'serverversion',type:'string'},
		                                {name:'logindate',type:'date'},
		                                {name:'isonline',type:'string',value:
			                                function(currentfield){
			                                	return currentfield.isonline==true?"在线":"离线";
			                                }
		                                },
		                                {name:'opfield',type:'opfield',value:
		                                	function(currentfield){
			                                	return getTbodyOpButton((currentfield.isonline==true?'关机':'开机'),currentfield.deviceid);
			                                }
		                                }
	                                ];
	                                grid.onloading=function(currentfield){
	                                	 device[currentfield.deviceid] = {
						                    port: currentfield.deviceport
						          		 };
	                                };
	                                playingui.buildgrid(grid);
                          }
                      }
	             });
            }

            function showNoRecord(isshow)
            {
            	showLoadingImg(false);
            	if(isshow){
            		$norecord.show();
            		$tbody.hide();
            		$tbodyPage.hide();
            	}else
            	{
            		$norecord.hide();
            	}
            }
            
            function getTbodyOpButton(msg,id)
            {
            	return "<button keyid='"+id+"' class='btn btn-primary opButton' type='button'>"+msg+"</button>";
            }
            
            function getTbodyTd(str)
            {
            	return "<td>"+str+"</td>";
            }
            
            function bindEvent()
            {
            	bindButton();
            }
        </script>
</head>
<body>

     
   
	<div class="container" style="margin-top: 100px">
		<div class="row">
			<div class="span3 bs-docs-sidebar">
				<div class="nav nav-list bs-docs-sidenav affix" id="nav">
					<div id="tree" class="ztree"></div>
				</div>
			</div>
			<div class="span9">
				<section id="typography">
				<div class="alert alert-info norecord" id="norecord">没有记录</div>
					<img id="loadingimg" src="image/loading.gif">
					<table class="table table-bordered" id="tbody">
						<thead>
							<tr>
								<th>id</th>
								<th>设备名称</th>
								<th>设备IP</th>
								<th>设备版本</th>
								<th>服务器版本</th>
								<th>登陆时间</th>
								<th>是否在线</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="tbodyList"></tbody>
					</table>
					<div id="tbodyPage"></div>
				</section>
			</div>
		</div>
	</div>
</body>
<script src="style/bootstrap/js/bootstrap.min.js"></script>
</html>
